<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '会议室预约状态一览表',
    enablePullDownRefresh: true,
  },
}
</route>
<template>
  <view>
    <th-page-box>
      <template #tabBar>
        <view class="tab_bar_inner">
          <wd-navbar title="会议室预约状态一览表" :bordered="false" safeAreaInsetTop>
            <template #left>
              <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
            </template>
          </wd-navbar>
          <view class="cu-bar search-container">
            <view class="search-form round">
              <!-- <wd-input
                type="text"
                prop="date"
                v-model="state.queryForm.date"
                no-border
                clearable
                placeholder="请选择日期"
                :disabled="true"
                style="
                  display: flex;
                  align-items: center;
                  width: 100%;
                  height: 100%;
                  padding: 0 20rpx;
                "
                @confirm="handleSearch"
                confirm-type="search"
              /> -->
              <uni-datetime-picker
                prop="dateNow"
                type="date"
                v-model="state.queryForm.dateNow"
                no-border
                return-type="string"
                style="display: flex; align-items: center; width: 100%; height: 100%"
                placeholder="请选择日期"
                @change="dateChange"
              />
              <text class="filter-icon cuIcon-searchlist" @click="filterIsShow = true"></text>
            </view>
            <view class="action">
              <button
                @click="handleSearch()"
                class="cu-btn bg-gradual-green shadow-blur round"
                style="margin-right: 10rpx"
              >
                查询
              </button>
              <button
                @click="handleAdd()"
                class="cu-btn bg-gradual-blue shadow-blur round"
                v-if="checkPremiss('work_conference_room_make_an_appointment_add')"
              >
                预约
              </button>
            </view>
          </view>
          <view class="tabs">
            <view
              v-for="(item, index) in tableList"
              :class="['item', 'i' + index, item.value === activeTab ? 'on' : '']"
              :key="item.value"
              @click="onTabChange(item.value)"
            >
              {{ item.label }}
            </view>
          </view>
        </view>
      </template>
      <template #inner>
        <view class="content" style="padding-top: 100px; background-color: #f8f8f8">
          <view>
            <th-card v-if="state.queryForm.status != 3" :titleBlock="false">
              <view class="tag_inner">
                <view
                  :loading="loading"
                  :class="
                    'tag_item ' +
                    (item.id == state.queryForm.roomId ? 'active ' : '') +
                    (item.fullFlag == 0 ? 'active1' : item.fullFlag == 1 ? 'active2' : '')
                  "
                  v-for="(item, index) in roomList"
                  :key="index"
                  @click="selectRoom(item)"
                >
                  <view class="tag_item_text1">{{ item.name }}</view>
                  <view class="tag_item_text2">{{ '(' + item.personNum + '人)' }}</view>
                </view>
              </view>
            </th-card>
            <!-- v-if="chartOptions" -->
            <th-card v-if="state.queryForm.type == 1" :titleBlock="false">
              <!-- @touchmove.stop.prevent="stopMove" -->
              <view style="width: 100%; height: 500px">
                <th-echarts ref="reLiRef" :option="chartOptions"></th-echarts>
              </view>
            </th-card>
            <th-card v-if="state.queryForm.type == 2" :titleBlock="false">
              <!-- @touchmove.stop.prevent="stopMove" -->
              <view style="width: 100%; height: 500px">
                <th-echarts-gantt ref="ganttRef" :info="ganttChartOptions"></th-echarts-gantt>
              </view>
            </th-card>
          </view>
        </view>
        <wd-popup
          v-model="filterIsShow"
          position="bottom"
          :close-on-click-modal="false"
          custom-style="padding: 32rpx;border-top-left-radius:60rpx;border-top-right-radius:60rpx;"
          @close="handleClose"
        >
          <view class="cu-dialog" @click.stop="">
            <view class="cu-bar bg-white" style="min-height: 60rpx !important">
              <view class="action"></view>
              <view class="action mks" @click="filterIsShow = false">取消</view>
            </view>
            <view class="filter_container">
              <view class="block">
                <view class="label">日期</view>
                <view class="row">
                  <uni-datetime-picker
                    type="date"
                    return-type="string"
                    v-model="state.queryForm.dateNow"
                    placeholder="日期"
                    @change="dateChange"
                  />
                </view>
              </view>
              <view class="block">
                <view class="label">图表展现形式</view>
                <view class="row">
                  <wd-picker
                    border
                    class="wd-icker"
                    :columns="typeList"
                    v-model="state.queryForm.type"
                    placeholder="请选择展现形式"
                  />
                </view>
              </view>
              <view class="block">
                <view class="label">图表展现维度</view>
                <view class="row">
                  <wd-picker
                    border
                    class="wd-icker"
                    :columns="statusList"
                    v-model="state.queryForm.status"
                    placeholder="请选择维度"
                  />
                </view>
              </view>
              <view class="block" style="margin-top: 60rpx">
                <view class="row">
                  <view class="btn" @click="resetFilter">重置</view>
                  <view class="btn primary" @click="handleSearch()">查询</view>
                </view>
              </view>
            </view>
          </view>
        </wd-popup>
      </template>
    </th-page-box>
  </view>
</template>

<script lang="tsx" setup name="workConferenceRoomMakeAnAppointment">
import { useSetting } from '@/stores/setting';
import {
  getThMeetingRoom,
  getHourChatList,
  getWekChatList,
  getRoomChatList,
  getThHourGanttList,
  getThRoomGanttList,
  getThWeekGanttList,
} from '@/service/work/conferenceRoom/makeAnAppointment';
import dayjs from 'dayjs';
import { formatByDayjs } from '@/utils/util';
import { useDict } from '@/hooks/dict';
import { useUserStore } from '@/stores/user';
import thEcharts from '@/components/th-echarts.vue';
import thEchartsGantt from './component/th-echarts-gantt.vue';

const dateNow = ref(dayjs().format('YYYY-MM-DD'));
const nowDate = ref(`${dateNow.value}`);

const dataList = ref([]);
const roomList = ref([]);
const setting = useSetting();
const chartOptions = ref(null);
const ganttChartOptions = ref(null);

const page = ref(1);
const loading = ref(false);
// const { bill_status } = useDict('bill_status');
const loadMore = ref<any>('finished');
const userStore: any = useUserStore();
const filterIsShow = ref(false);

const getInfoData = ref(null);

const reLiRef = ref(null);
const ganttRef = ref(null);

const statusList = ref([
  {
    label: '近期',
    value: '1',
    color: '#87d068',
  },
  {
    label: '当日',
    value: '2',
    color: '#87d068',
  },
  {
    label: '会议室',
    value: '3',
    color: '#87d068',
  },
]);

const typeList = ref([
  {
    label: '热力图',
    value: '1',
    color: '#87d068',
  },
  {
    label: '甘特图',
    value: '2',
    color: '#87d068',
  },
]);

const tableList = ref([
  {
    label: '全部',
    value: null,
    color: '#108ee9',
  },
  {
    label: '可预约',
    value: '0',
    color: '#87d068',
  },
  {
    label: '已约满',
    value: '1',
    color: '#f50',
  },
]);

const state = reactive({
  queryForm: {
    status: 1,
    size: 20,
    dateNow,
    type: 2,
    topic: null,
    roomId: null,
    roomName: '',
    endTime: null,
    startTime: null,
  },
});

// onLoad((options) => {
// tableList.value = [
//   {
//     label: '全部',
//     value: null,
//     color: '#108ee9',
//   },
//   ...bill_status.value,
// ];
// getData();
// });

onShow(() => {
  refresh();
});

const resizeParams = (data: { [x: string]: any }) => {
  const o = {};
  Object.keys(data).forEach((item) => {
    if (data[item] !== null && data[item] !== '') {
      o[item] = data[item];
    }
  });
  return o;
};

const getData = (isShowLoading = true) => {
  if (isShowLoading) {
    uni.showLoading();
    loading.value = true;
  }
  const params = resizeParams(state.queryForm);
  loadMore.value = 'loading';
  getThMeetingRoom({
    dateNow: params.dateNow,
    fullFlag: activeTab.value,
  })
    .then((res: { code: number; msg: any; data: string | any[] }) => {
      if (res.code !== 0) {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        });
        return;
      }

      roomList.value = res.data || [];
      if (!state.queryForm.roomId) {
        state.queryForm.roomId = res.data.length ? res.data[0].id : '';
        state.queryForm.roomName = res.data.length ? res.data[0].name : '';
      }
      getList(isShowLoading);
    })
    .catch((err: { data: { msg: any }; msg: any }) => {
      loadMore.value = 'finished';
      uni.showToast({
        title: err.data?.msg || err.msg,
        icon: 'none',
      });
    })
    .finally(() => {
      if (isShowLoading) {
        uni.hideLoading();
        loading.value = false;
      }
      uni.stopPullDownRefresh();
    });
};

const initChartOptions = (info) => {
  console.log('initChartOptions-info', info);

  const _hours = ref([
    '00',
    '01',
    '02',
    '03',
    '04',
    '05',
    '06',
    '07',
    '08',
    '09',
    '10',
    '11',
    '12',
    '13',
    '14',
    '15',
    '16',
    '17',
    '18',
    '19',
    '20',
    '21',
    '22',
    '23',
  ]);
  const hours = ref([
    '00:00',
    '01:00',
    '02:00',
    '03:00',
    '04:00',
    '05:00',
    '06:00',
    '07:00',
    '08:00',
    '09:00',
    '10:00',
    '11:00',
    '12:00',
    '13:00',
    '14:00',
    '15:00',
    '16:00',
    '17:00',
    '18:00',
    '19:00',
    '20:00',
    '21:00',
    '22:00',
    '23:00',
  ]);
  const days = ref([]);
  const data = ref([]);
  days.value = info.yaxis || [];
  if (info.data && info.data.length) {
    data.value = info.data.map((item) => {
      return [item[0], item[1], item[2] || '-'];
      // if (state.queryForm.status == 1) {
      //   return [item[1], item[0], item[2] || '-'];
      // }
      // if (state.queryForm.status == 2 || state.queryForm.status == 3) {
      //   return [item[0], item[1], item[2] || '-'];
      // }
    });
  }
  const option = {};
  chartOptions.value = {
    title: {
      text:
        state.queryForm.status != 3
          ? `${state.queryForm.roomName}24小时预约情况`
          : '会议室24小时预约情况',
      left: 'center',
      top: 0,
    },
    tooltip: {
      position: 'top',
      formatter: (params) => {
        // params 是一个包含当前数据点信息的对象
        // params.name 通常是 x 轴的值（但在这个例子中我们可能不使用它，因为我们要自定义）
        // params.value 是数据点的值
        // params.seriesName 是系列的名称
        // params.dataIndex 和 params.seriesIndex 可以用来访问原始数据或系列索引
        // 但由于我们的数据是二维的，并且已经通过映射转换了索引，我们可以直接从 params.value 获取小时和天的索引
        const hourIndex = params.value[1];
        const dayIndex = params.value[0];
        const value = params.value[2] || '-';
        // 使用索引从 hours 和 days 数组中检索实际的字符串
        const h = _hours.value[hourIndex];
        const d = days.value[dayIndex];
        // console.log(hourIndex, dayIndex);
        // console.log(d, h);
        // 自定义 tooltip 的内容
        //   return `
        //   <view style="border-bottom: 1px solid #E0E0E0; margin-bottom: 8px; font-size: 16px; color: #333;">
        //     ${d}日 ${h}时
        //   </view>
        //   <view style="display: inline-block; margin-right: 10px; color: #999; font-size: 13px;">
        //     ${params.seriesName}:
        //   </view>
        //   <view style="color: #333; font-size: 16px; font-weight: bold;">
        //     ${value}分钟
        //   </view>
        return `${d} ${h}时\n${params.seriesName}\n${value}分钟`;
      },
    },
    grid: {
      left: 50,
    },
    xAxis: {
      type: 'category',
      data: days.value,
      // data: state.queryForm.status == 1 ? days.value : hours.value,
      splitArea: {
        show: true,
      },
    },
    yAxis: {
      type: 'category',
      data: hours.value,
      // data: state.queryForm.status == 1 ? hours.value : days.value,
      splitArea: {
        show: true,
      },
    },
    visualMap: {
      min: 0,
      max: 10,
      // calculable: true,
      type: 'piecewise',
      orient: 'horizontal',
      // left: '50%',
      right: '3%',
      top: '6%',
      pieces: [
        { lte: 0, label: '空置', color: '#a6a6a6' },
        { gt: 0, lt: 59, label: '可预约', color: '#52b27c' },
        { gte: 60, label: '已约满', color: '#ff5733' },
      ],
    },
    series: [
      {
        name: '已预约时长(分钟)',
        type: 'heatmap',
        data,
        label: {
          show: true,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };
  console.log('chartOptions.value', chartOptions.value);
};

const initGantt = (info) => {
  const infoData = info;
  const flightData = [];
  const _type = state.queryForm.status;
  const _date = state.queryForm.dateNow;
  // console.log('_date', _date);
  if (infoData.flightData) {
    infoData.flightData.forEach((subarray) => {
      const item = [...subarray];
      if (item.length == 3) {
        item[4] = '';
      }
      if (item[1] !== undefined && !isNaN(Number(item[1]))) {
        // 将字符串转换为数字
        item[1] = Number(item[1]);
        if (_type == 1) {
          const day = calculateDaysDifference(item[1], _date);
          // console.log('_TIME_ARRIVAL_day', day);
          item[5] = dayjs(item[1]).format('YYYY-MM-DD HH:mm:ss');
          item[1] = Number(item[1]) + day * 24 * 60 * 60 * 1000;
          // console.log('_TIME_ARRIVAL', dayjs(item[1]).format('YYYY-MM-DD HH:mm:ss'));
        }
      }
      if (item[2] !== undefined && !isNaN(Number(item[2]))) {
        // 将字符串转换为数字
        item[2] = Number(item[2]);
        if (_type == 1) {
          const day = calculateDaysDifference(item[2], _date);
          // console.log('_TIME_DEPARTURE_day', day);
          item[6] = dayjs(item[2]).format('YYYY-MM-DD HH:mm:ss');
          item[2] = Number(item[2]) + day * 24 * 60 * 60 * 1000;
          // console.log('_TIME_DEPARTURE', dayjs(item[2]).format('YYYY-MM-DD HH:mm:ss'));
        }
      }
      flightData.push(item);
    });
    if (_date) {
      flightData.push([
        -1,
        new Date(`${_date} 07:00:00`).getTime(),
        new Date(`${_date} 18:00:00`).getTime(),
        '',
        '',
        new Date(`${_date} 07:00:00`).getTime(),
        new Date(`${_date} 18:00:00`).getTime(),
      ]);
    }
  }
  ganttChartOptions.value = {
    title_text:
      _type != 3
        ? `${state.queryForm.roomName + (_type == 1 ? '近期' : `${_date}`)}预约情况`
        : `会议室预约情况`,
    type: _type,
    date: _date,
    ...info,
    flightData,
  };
};

const calculateDaysDifference = (timestamp: number, date) => {
  // 使用dayjs将时间戳转换为Date对象
  const inputDate = dayjs(dayjs(timestamp).format('YYYY-MM-DD 00:00:00'));
  // console.log('inputDate', inputDate);

  // 获取日期
  const nowDate = dayjs(dayjs(date).format('YYYY-MM-DD 00:00:00'));
  // console.log('nowDate', nowDate);

  // 计算两个日期之间的差异（天数）
  // 注意：diff方法默认返回毫秒数，需要传入'day'作为第二个参数来获取天数差异
  const diffInDays = nowDate.diff(inputDate, 'day');

  // 如果需要知道是前多少天还是后多少天，diffInDays的符号将表明这一点
  // 负数表示inputDate在nowDate之前，正数表示inputDate在nowDate之后
  return diffInDays;
};

const getUrl = (type, params) => {
  if (type == 1) {
    return state.queryForm.status == 1
      ? getWekChatList(params)
      : state.queryForm.status == 2
        ? getHourChatList(params)
        : getRoomChatList(params);
  }
  if (type == 2) {
    return state.queryForm.status == 1
      ? getThWeekGanttList(params)
      : state.queryForm.status == 2
        ? getThHourGanttList(params)
        : getThRoomGanttList(params);
  }
};

const getList = (isShowLoading) => {
  if (isShowLoading) {
    uni.showLoading();
    loading.value = true;
  }
  const params = {
    date: state.queryForm.dateNow,
    roomId: state.queryForm.roomId,
  };
  loadMore.value = 'loading';
  getUrl(state.queryForm.type, params)
    .then((res: { code: number; data: any; msg: any }) => {
      if (res.code !== 0) {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        });
      }
      if (res.data) {
        console.log('state.queryForm.type', state.queryForm.type, res.data);
        getInfoData.value = res.data;
        if (state.queryForm.type == 1) {
          initChartOptions(getInfoData.value);
        } else {
          initGantt(getInfoData.value);
        }
      }
    })
    .catch((err: { data: { msg: any }; msg: any }) => {
      console.log('err', err);
      loadMore.value = 'finished';
      uni.showToast({
        title: err.data?.msg || err.msg,
        icon: 'none',
      });
    })
    .finally(() => {
      if (isShowLoading) {
        uni.hideLoading();
        loading.value = false;
      }
      uni.stopPullDownRefresh();
    });
};
const goBack = () => {
  uni.navigateBack();
};
uni.onWindowResize((res) => {
  console.log('onWindowResize', res);
  if (state.queryForm.type == 1) {
    // initChartOptions(getInfoData.value);
    reLiRef.value.getResize();
  } else {
    // initGantt(getInfoData.value);
    ganttRef.value.getResize();
  }
});
// watch(
//   () => bill_status.value,
//   (n) => {
//     console.log('=----b', n);
//     tableList.value = [
//       {
//         label: '全部',
//         value: null,
//         color: '#108ee9',
//       },
//       ...n,
//     ];
//   },
//   {
//     deep: true,
//     immediate: true,
//   },
// );

const handleSearch = (e?: undefined) => {
  dataList.value = [];
  page.value = 1;
  // state.demandDate = state.demandDate
  //   ? formatByDayjs(state.demandDate, 'YYYY-MM-DD 00:00:00')
  //   : null;
  getData();
  filterIsShow.value = false;
};

const dateChange = (e) => {
  // console.log(111, e, state.queryForm.dateNow, nowDate.value);
  if (e != nowDate.value) {
    nowDate.value = e;
    state.queryForm.roomId = '';
    handleSearch();
  }
};

const selectRoom = (info) => {
  console.log('selectRoom', info);
  if (state.queryForm.roomId != info.id) {
    state.queryForm.roomId = info.id;
    state.queryForm.roomName = info.name;
    handleSearch();
  }
};

const handleAdd = () => {
  uni.navigateTo({
    url:
      `/pages/work/conferenceRoom/makeAnAppointment/form?id=` +
      '' +
      `&roomId=${state.queryForm.roomId}`,
  });
};

const activeTab = ref(null);

const onTabChange = (e: any) => {
  activeTab.value = e;
  dataList.value = [];
  page.value = 1;
  state.queryForm.roomId = '';
  handleSearch();
  // resetFilter();
};

onPullDownRefresh(() => {
  // 重新获取
  // if (loading.value) return;
  // dataList.value = [];
  // page.value = 1;
  // getData();
  refresh();
});

onReachBottom(() => {
  if (loading.value) return;
  // page.value++;
  // getData();
  if (loadMore.value === 'loadEnd') {
    page.value++;
    getData();
  }
});

const refresh = (e?) => {
  dataList.value = [];
  page.value = 1;
  getData(e);
};

uni.$on('refresh', () => {
  refresh(false);
});

const handleClose = () => {
  filterIsShow.value = false;
};

const resetFilter = () => {
  handleClose();
  state.queryForm.roomId = null;
  handleSearch();
};

const demandDateList = ref(['', '']);
const displayFormatTabLabel = (items: { label: any }[]) => {
  return `${items[0].label}年${items[1].label}月${items[2].label}日`;
};

const handleConfirm = ({ value }) => {
  console.log(new Date(value));
};

const checkPremiss = (k: string) => {
  return userStore.userInfos.authBtnList.some((v: string) => v === k);
};
</script>

<style lang="scss">
$padding: 30rpx;
.search-form {
  :deep(.uni-date-editor) {
    width: 100%;
  }
}
.wd-icker {
  width: 100%;
  height: 74rpx;
  font-size: 0.785rem;
  border-radius: 4rpx;
  border: 1px solid #e5e5e5;
  margin-bottom: 2px;
  box-sizing: border-box;
  :deep(.wd-picker__cell) {
    padding: 8rpx 10rpx 8rpx 20rpx;
  }
}

.tab_bar_inner {
  background-image: linear-gradient(45deg, #0081ff, #1ab3f5);
  :deep(.wd-navbar) {
    background-color: rgba(0, 0, 0, 0) !important;
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) !important;
  }
  // .cu-bar.search-container {
  //   background-image: linear-gradient(45deg, #0081ff, #1ab3f5);
  // }
  :deep(uni-button:after) {
    border: 1px solid rgba(0, 0, 0, 0);
  }
}

.canvas-box {
  .canvas {
    height: 300rpx;
    transition: height 0.3s;
  }

  .btns {
    margin-top: 10rpx;
    transition: transform 0.3s;

    .btn {
      width: auto;
      height: 50rpx;
    }
  }
}

.full-screen {
  flex-direction: row;
  height: calc(100vh - 88rpx);

  .canvas {
    width: calc(100% - 100rpx);
    height: 100%;
    margin-left: 100rpx;
  }

  .btns {
    position: absolute;
    align-items: center;
    width: calc(100vh - (88rpx + $padding * 2));
    height: 100rpx;
    transform: translate(100rpx, 0) rotate(90deg);
    transform-origin: top left;

    .btn-box {
      flex-direction: row;
    }
  }
}

.tabbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: linear-gradient(45deg, #0081ff, #1ab3f5);
}

.tabbar_c {
  height: 100%;
  font-weight: 800;
  color: white;
  letter-spacing: 2px;
  background: linear-gradient(45deg, #0081ff, #1ab3f5);
}

.bolck {
  background: linear-gradient(45deg, #0081ff, #1ab3f5);
}

.task_list {
  background: #f7f7f7;
}

.cu-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
}

.cu-bar .search-form {
  display: flex;
  flex: 1;
  align-items: center;
  height: 64rpx;
  margin: 0 30rpx;
  overflow: hidden;
  /* padding: 0 40rpx; */
  font-size: 24rpx;
  line-height: 64rpx;
  color: #333;
  background-color: white;
}

.search-container .filter-icon {
  padding: 0 18rpx;
  margin: 0;
  font-size: 40rpx;
  color: #007aff;
  border-left: 1rpx solid #f3f3f3;
}

.round {
  border-radius: 2500px;
}

.cu-bar .search-form + .action {
  margin-right: 30rpx;
}

.cu-bar .action {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 100%;
}

.search-container .action .cu-btn {
  padding: 0 24rpx;
}

.bg-gradual-green {
  color: #fff;
  background-image: linear-gradient(45deg, #39b54a, #8dc63f);
}

.bg-gradual-blue {
  color: #fff;
  background-image: linear-gradient(45deg, #0c62d3, #2a73d3);
}

.cu-btn {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64rpx;
  padding: 0 30rpx;
  margin-right: initial;
  margin-left: initial;
  overflow: visible;
  font-size: 28rpx;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: 0;
  transform: translate(0, 0);
}

.tabs {
  display: flex;
  justify-content: space-between;
  padding: 0 50rpx;
  margin-top: 15rpx;

  .item {
    position: relative;
    padding: 15rpx 0;
    font-size: 30rpx;
    color: #fff;
    text-align: center;
    opacity: 0.5;
    transition: all 0.3s;

    &.on {
      opacity: 1;

      &::after {
        position: absolute;
        bottom: -8rpx;
        left: 50%;
        width: 12rpx;
        height: 12rpx;
        content: '';
        background: #f1f1f1;
        border-radius: 50%;
        transform: translate(-50%);
      }
    }
  }
}

// :deep(.wd-navbar) {
//   background: inherit;
// }

.cu-dialog {
  font-size: 28rpx;
}

.cu-dialog > .cu-bar:first-child .action {
  margin-right: 20rpx;
}

.filter_container {
  padding: 10rpx 32rpx 32rpx;
  padding-bottom: 64rpx;
  text-align: left;
  background-color: #fff;

  .block {
    ~ .block {
      margin-top: 32rpx;
    }

    .label {
      margin-bottom: 20rpx;
      font-weight: bold;
    }
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    .date-picker {
      flex: 1;
      padding: 16rpx;
      text-align: center;
      background-color: #f7f7f7;
      border-radius: 8rpx;
    }

    .select-box {
      flex: 1;
      padding: 16rpx;
      background-color: #f7f7f7;
      border-radius: 8rpx;

      :deep(.select-row) {
        padding: 0;
        background: none;
      }
    }

    input {
      flex: 1;
      height: 33rpx;
      padding: 16rpx 12rpx;
      font-size: 26rpx !important;
      background-color: #f7f7f7;
      border: 1rpx solid #f7f7f7;
      border-radius: 8rpx;

      .input-placeholder {
        color: #8a929f;
      }
    }

    .btn {
      flex: 1;
      padding: 16rpx;
      color: #999;
      text-align: center;
      background-color: #f7f7f7;
      border: 1rpx solid #dedede;
      border-radius: 8rpx;

      ~ .btn {
        margin-left: 24rpx;
      }

      &.primary {
        color: #fff;
        background-color: #007aff;
        border-color: #007aff;
      }
    }
  }
}

:deep(.wd-navbar__left--hover) {
  background: none;
}

.s-date {
  .wd-picker__cell {
    padding: 0 !important;
  }
}

.form-item {
  padding: 24rpx 0 !important;
  margin: 0 !important;
}
.tag_inner {
  display: flex;
  align-items: center;
  padding: 10rpx 0 30rpx 0;
  margin-bottom: 10rpx;
  overflow-x: auto;
}
.tag_item {
  padding: 10rpx 15rpx;
  min-width: 200rpx;
  height: 85rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: rgba(255, 255, 255, 1);
  border-radius: 6rpx;
  border: rgba(166, 166, 166, 1) solid 1rpx;
  background-color: rgba(166, 166, 166, 1);
  font-weight: 500;
  margin-left: 20rpx;
  margin-right: 30rpx;
  cursor: pointer;
  box-shadow: 0 10rpx 10rpx 0 rgba(187, 187, 187, 0.1);
  .tag_item_text1 {
    flex-wrap: nowrap;
    font-size: 0.825rem;
  }
  .tag_item_text2 {
    font-size: 0.75rem;
  }
}
.tag_item.active {
  // transition: width 1s;
  // -webkit-transition: width 1s; /* Safari */
  border: rgba(255, 255, 255, 1) solid 4rpx;
  box-shadow: 0 10rpx 10rpx 0 rgba(0, 0, 0, 0.3);
}
// .tag_item:hover {
//   transition: width 1.5s;
//   -webkit-transition: width 1.5s; /* Safari */
//   box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.5);
// }
.tag_item.active1 {
  // border: rgba(82, 178, 124, 1) solid 1rpx;
  background-color: rgba(82, 178, 124, 1);
}
.tag_item.active2 {
  // border: rgba(255, 87, 51, 1) solid 1rpx;
  background-color: rgba(255, 87, 51, 1);
}
</style>
